<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6 模块化</title>
  <!-- 设置type="module"后，才能支持module语法 -->
  <script type="module">

    /*
     * ES6模块化 
     *    export 导出模块
     *    import 导入模块
     * 
     */ 

    // 1. 通用的导入方式
    // 引入m1模块
    import * as m1 from "./src/js/m1.js"; // 将m1所有暴露的变量或函数保存到m1中
    // 引入m2模块
    import * as m2 from "./src/js/m2.js"; 
    // 引入m3模块
    import * as m3 from "./src/js/m3.js";

    // console.log(m1);
    // console.log(m2);
    // console.log(m3);
    // console.log(m3.default.school);

    // 2. 解构赋值形式导入
    import {school, teach} from "./src/js/m1.js";
    import {school as school2, findJob} from "./src/js/m2.js";
    import {default as mm3} from "./src/js/m3.js"; // 这里必须给default起别名

    // console.log(school, school2);
    // console.log(mm3);

    // 3. 简便形式，只能作用于默认暴露
    import module3 from "./src/js/m3.js";
    console.log(module3);

  </script>
  <!-- <script src="./src/js/app.js" type="module"></script> -->
</head>

<body>

</body>

</html>